import React, { useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';

const Header = () => {
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      const header = document.getElementById("site-header");
      if (window.scrollY >= 80) {
        header?.classList.add("nav-fixed");
      } else {
        header?.classList.remove("nav-fixed");
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <header id="site-header" className="fixed-top">
      <div className="container">
        <nav className="navbar navbar-expand-lg stroke px-0">
          <h1>
            <Link className="navbar-brand" to="/">
              海洋生态评估
            </Link>
          </h1>
          <button
            className="navbar-toggler collapsed bg-gradient"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo02"
            aria-controls="navbarTogglerDemo02"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon fa icon-expand fa-bars"></span>
            <span className="navbar-toggler-icon fa icon-close fa-times"></span>
          </button>

          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
              <li className={`nav-item ${location.pathname === '/' ? 'active' : ''}`}>
                <Link className="nav-link" to="/">首页</Link>
              </li>
              <li className={`nav-item ${location.pathname === '/dashboard' ? 'active' : ''}`}>
                <Link className="nav-link" to="/dashboard">数据总览</Link>
              </li>
              <li className={`nav-item ${location.pathname === '/marine-map' ? 'active' : ''}`}>
                <Link className="nav-link" to="/marine-map">海域评估</Link>
              </li>
              {/* <li className={`nav-item ${location.pathname === '/about' ? 'active' : ''}`}>
                <Link className="nav-link" to="/about">风险预警</Link>
              </li>
              <li className={`nav-item ${location.pathname === '/contact' ? 'active' : ''}`}>
                <Link className="nav-link" to="/contact">联系我们</Link>
              </li> */}
            </ul>
          </div>
        </nav>
      </div>
    </header>
  );
};

export default Header; 